<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />
    <title>节奏练习</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/chored.css">
    <link rel="stylesheet" href="./css/todoList.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/jianpu.css">
    <style>
        .plan-list {
            margin-top: 20px;
            height: calc(100vh - 560px);
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <audio id="piano-audio"></audio>
    <div>
        <div class="piano-box">
            <div class="piano-main">
                <div class="piano-left">
                    <div class="tool-box">
                        <!--select下拉菜单：调式-->
                        <div class="select">
                            <label for="">调式：</label>
                            <select name="" id="select-tuning">
                                <!-- <option value="0">C调</option> -->
                            </select>
                        </div>

                        <!--select下拉菜单：和弦-->
                        <div class="select">
                            <label for="">和弦：</label>
                            <select name="" id="select-chord">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <!--开关：开启关闭是否显示键盘简谱名-->
                        <div class="switch">
                            <input type="checkbox" id="show-name" checked>
                            <label for="">显示简谱名</label>
                        </div>

                        <!--开关：开启关闭是否显示键盘映射-->
                        <div class="switch">
                            <input type="checkbox" id="show-keyboard" checked>
                            <label for="">显示键盘映射栏</label>
                        </div>

                    </div>
                    <!--和弦解释-->
                    <div class="chord-info">
                        <div class="chord-name">和弦名称：<span>-</span>和弦</div>
                        <div class="chord-attr">和弦属性：<span>-</span>和弦</div>
                        <div class="chord-form">和弦组成音：根音：<span>-</span>三音：<span>-</span>五音：<span>-</span></div>
                        <div class="chord-transposition">转位和弦：<span></span><span></span><span></span></div>
                    </div>


                    <!--简谱-->
                    <div class="chord-sheet">
                        <div class="chord-sheet-title">
                            歌曲名称
                        </div>
                        <!--调式-->
                        <div class="chord-sheet-tuning">
                            1 = C <sup>3</sup>/<sub>4</sub>
                        </div>
                        <!--速度-->
                        <div class="chord-sheet-speed">
                            速度：120
                        </div>
                        <!-- 内容 -->
                        <div class="chord-sheet-content">
                            <!--行-->
                            <div class="jianpu-line">
                                <!--右手-->
                                <div class="jianpu-line-right-hand">
                                    <!--跳房子-->
                                    <!-- <div class="jianpu-fangzi">1</div> -->
                                    <!--小节-->
                                    <div class="jianpu-section-box">
                                        <div class="jianpu-section">
                                            <!--小节里的每一个音符-->
                                            <div class="jianpu-section-item" jpcode="C" isbeat="true" islyric="true">
                                                <!--音符-->
                                                <div class="jianpu-note-box">
                                                    <div class="jianpu-note">
                                                        <!--点-->
                                                        <div class="jianpu-note-up"><span class="jianpu-up"><b>.</b><b>.</b></span></div>
                                                        <!--连接线-->
                                                        <!-- <div class="jianpu-connection-line"></div> -->
                                                        <!--升号-->
                                                        <!-- <span class="jianpu-sharp">♯♭♮</span> -->
                                                        <span class="jianpu-sharp">#</span>
                                                        1
                                                        <!--浮点音符-->
                                                        <span class="jianpu-point">.</span>
                                                    </div>
                                                    <!--下划线-->
                                                    <!-- <ol class="jianpu-barLine">
                                                        <li></li>
                                                    </ol> -->
                                                    <!--降号-->
                                                    <span class="jianpu-down">
                                                        <b>.</b><b>.</b>
                                                    </span>
                                                </div>
                                                <!--歌词1-->
                                                <div class="jianpu-lyric" lcode="这"><span>这</span></div>
                                                <!--歌词2-->
                                                <div class="jianpu-lyric" lcode="我"><span>我</span></div>
                                            </div>
                                            <div class="jianpu-section-item" jpcode="C" isbeat="true" islyric="true">
                                                <div class="jianpu-note-box">
                                                    <div class="jianpu-note">
                                                        2
                                                        
                                                    </div>
                                                    <ol class="jianpu-barLine">
                                                        <li></li>
                                                    </ol>
                                                </div>
                                            </div>
                                            <!--延音线-->
                                            <div class="jianpu-section-item jianpu-line2">
                                                <div class="jianpu-seaction-line2">
                                                    －
                                                </div>
                                            </div>
                                            <!--小节线-->
                                            <div class="jianpu-bar-box" style="display: none;">
                                                <!--单线-->
                                                <div class="jianpu-bar"></div>
                                                <!--双线-->
                                                <div class="jianpu-double"></div>
                                                <!--结束线-->
                                                <div class="jianpu-end"></div>
                                                <!--开始线-->
                                                <div class="jianpu-start"></div>
                                                <!--开始循环-->
                                                <div class="jianpu-repeat-start">
                                                    <span>:</span>
                                                </div>
                                                <!--循环结束-->
                                                <div class="jianpu-repeat-end">
                                                    <span>:</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="jianpu-section-box"></div>
                                    <div class="jianpu-section-box"></div>
                                    <div class="jianpu-section-box"></div>
                                </div>
                                <!--左手-->
                                <div class="jianpu-line-left-hand">
                                    <!--小节-->
                                    <div class="jianpu-section-box"></div>
                                    <div class="jianpu-section-box"></div>
                                    <div class="jianpu-section-box"></div>
                                    <div class="jianpu-section-box"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="piano-right">
                    <div class="container">
                        <div class="calendar">
                            <!-- <h2>当前日期 <span id="selectedDate"></span></h2> -->
                            <span id="prevMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; color: #bbb;"></span></span>
                            <span id="currentMonthYear" style="vertical-align: middle;"></span>
                            <span id="nextMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; transform: rotate(180deg); display: inline-block;color: #bbb;"></span></span>
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>日</th>
                                                <th>一</th>
                                                <th>二</th>
                                                <th>三</th>
                                                <th>四</th>
                                                <th>五</th>
                                                <th>六</th>
                                            </tr>
                                        </thead>
                                        <tbody id="calendarBody"></tbody>
                                    </table>
                        </div>
                        <div class="plan">
                            <!--深蓝到浅蓝背景过渡的进度条，进度条的底色是灰色-->
                            <h3>任务 <span style="float: right;"><span id="completedPlans"></span>/<span
                                        id="totalPlans"></span></span>
                            </h3>
                            <div id="progress-bar">
                                <div id="progress-bar-inner"></div>
                            </div>
                            <!-- <form id="planForm"> -->
                            <!-- <input type="text" id="planTitle" placeholder="标题">
                                <textarea id="planDescription" placeholder="描述"></textarea> -->
                            <button class="add-plan"><span class="icon iconfont icon-add"
                                    style="font-size: 30px;"></span></button>
                            <!-- </form> -->
                            <div class="plan-list" id="planList"></div>
                            <div class="data-no"><img src="./images/noDataBg.png" style="width: 200px;"><span style="display: block;">暂无计划</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--电脑键盘键位映射-->
            <div class="keyboard-map">

            </div>
            <div class="piano-bottom">
                <div class="piano"></div>
                <ul class="piano-group"></ul>
            </div>
        </div>



        <!--计划弹窗-->
        <div class="popup-container">
            <div class="popup">
                <div class="popup-header">
                    <h2>计划</h2>
                    <span class="close">&times;</span>
                </div>
                <div class="popup-body">
                    <form id="planForm">
                        <input type="text" id="planTitle" placeholder="标题">
                        <textarea id="planDescription" placeholder="描述" style="height: 100px;resize:none"></textarea>
                        <button class="save-plan">保存</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/todoList.js"></script>
    <script src="js/chord.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/chordSheet.js"></script>
</body>

</html>